<template>
  <div class="app-container">
    <el-form ref="teacherForm" :model="teacher" :rules="rules" label-width="120px">
      <el-form-item label="教师名称" prop="collegeName" style="width: 350px;">
        <el-input v-model="teacher.collegeName" clearable placeholder="请如实填写"></el-input>
      </el-form-item>

      <el-form-item label="教师工号" prop="jobNumber" style="width: 450px;">
        <el-input v-model="teacher.jobNumber" clearable placeholder="请输入正确格式的教职工号"></el-input>
      </el-form-item>

      <el-form-item label="教师手机号" prop="phone" style="width: 450px;">
        <el-input v-model="teacher.phone" clearable placeholder="请输入正确格式的手机号"></el-input>
      </el-form-item>

      <el-form-item label="教师职位" prop="level">
        <el-select v-model="teacher.level" clearable placeholder="教师职位">
          <el-option :value="1" label="非主持工作的中层副职"/>
          <el-option :value="2" label="教师"/>
          <el-option :value="3" label="行政干事"/>
          <el-option :value="4" label="行政岗主管"/>
          <el-option :value="5" label="教研室主任"/>
          <el-option :value="6" label="系主任"/>
        </el-select>
      </el-form-item>

      <el-form-item label="所属学院" prop="college">
        <el-select v-model="teacher.college" clearable placeholder="所属专业学院">
          <el-option :value="1" label="商学院"/>
          <el-option :value="2" label="管理学院"/>
          <el-option :value="3" label="外语学院"/>
          <el-option :value="4" label="堪萨斯国际学院"/>
          <el-option :value="5" label="电信与智能制造学院"/>
          <el-option :value="6" label="计算机与软件工程学院"/>
          <el-option :value="7" label="艺术设计学院"/>
          <el-option :value="8" label="医学院"/>
          <el-option :value="9" label="文法学院(语委办)"/>
          <el-option :value="10" label="体育学院"/>
          <el-option :value="11" label="新闻与传播学院"/>
          <el-option :value="12" label="建筑工程学院"/>
          <el-option :value="13" label="音乐戏剧学院"/>
          <el-option :value="14" label="马克思主义学院"/>
          <el-option :value="15" label="国际教育学院"/>
          <el-option :value="16" label="教育学院"/>
          <el-option :value="17" label="继续教育学院"/>
          <el-option :value="18" label="国际语言中心"/>
        </el-select>
      </el-form-item>

      <el-form-item label="教师资历" prop="career" style="width: 500px;">
        <el-input type="textarea" placeholder="请输入内容，不超过30字" v-model="teacher.career" maxlength="30" show-word-limit></el-input>
      </el-form-item>

      <el-form-item label="教师简介" prop="intro" style="width: 500px;">
        <el-input type="textarea" placeholder="请输入内容，不超过50字" v-model="teacher.intro" maxlength="50" show-word-limit></el-input>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as teacher from '@/api/adm/teacherAdmin'

export default {
  data() {
    return {
      teacher: {
        collegeName: '', // 教师姓名
        jobNumber: '', // 教师工号
        phone: '', // 教师手机号
        college: null, // 教师所属学院
        level: null, // 教师职位
        intro: '', // 教师简介
        career: '', // 教师资历
      },
      saveBtnDisabled: false, // 保存按钮是否禁用
      rules: {
        collegeName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],
        jobNumber: [{ required: true, message: '请输入教师工号', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入教师手机号', trigger: 'blur' }],
        college: [{ required: true, message: '请选择所属学院', trigger: 'change' }],
        level: [{ required: true, message: '请选择教师职位', trigger: 'change' }],
        intro: [{ required: true, message: '请输入教师简介', trigger: 'blur' }],
        career: [{ required: true, message: '请输入教师资历', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.init()
  },
  watch: {
    $route(to, from) {
      this.init()
    }
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        this.teacher = {}
      }
    },
    saveOrUpdate() {
      this.$refs.teacherForm.validate((valid) => {
        if (valid) {
          if (!this.$route.params.id) {
            this.saveTeacher()
          } else {
            this.updateTeacher()
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    saveTeacher() {
      teacher.addTeacher(this.teacher).then(response => {
        this.$message({
          message: "添加成功",
          type: 'success'
        });
        this.$router.push({ path: '/adminTeacher/list' });
      }).catch(error => {
        console.error(error);
      });
    },
    getInfo(id) {
      teacher.getInfoTeacher(id).then(response => {
        this.teacher = response.data.admTeacher
      })
    },
    updateTeacher() {
      teacher.updateTeacher(this.teacher, this.$route.params.id).then(response => {
        this.$message({
          message: "修改成功",
          type: 'success'
        });
        this.$router.push({ path: '/adminTeacher/list' });
      }).catch(error => {
        console.error("请求有误，请联系工作人员！");
      });
    }
  }
}
</script>
